<template>
  <el-row class="home" :gutter="20">
    <!-- 左侧部分 ：采用响应式布局 xs sm md-->
    <el-col :span="8" style="margin-top: 20px;" :xs="6" :sm="12" :md="6">
      <!-- 卡片1 ：用户部分 -->
      <el-card shadow>
        <div>
          <img :src="userImg" class="milkCss" />
          <div class="userInfo">
            <p>
               <router-link to="/member/index" class="name">admin</router-link>
            </p>
            <p>超级管理员</p>
          </div>
        </div>
        <hr class="hrCss" />
        <div>
          <p>上次登录时间：<span>2022-03-25</span></p>
          <p>上次登录地点：<span>杭州</span></p>
        </div>
      </el-card>
      <!-- 卡片2：购买统计部分 -->
      <el-card style="margin-top: 20px;height: 470px;line-height: 60px;">
        <el-table :data="tableData">
          <el-table-column v-for='(val,index) in tableLabel' :key="index" :prop="index" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <!-- 右侧部分 ： element中的layout布局：响应式布局  -->
    <el-col style="margin-top: 20px;" :span="16" :xs="6" :sm="12" :md="6">
      <!-- 订单统计 -->
      <div class="num">
        <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
          <!-- ``是es6的模板字符串    进行数据的拼接 -->
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
          <div class="detail">
            <p class="num_val">￥{{item.value}}</p>
            <p class="txt">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <!-- 图表部分 -->
      <div class="picture">
        <!-- 折线图 -->
        <el-card class="pic">
          <!--  高度最好与父元素的样式一样    ref是用来获取dom的节点 -->
          <div style="height: 280px;" ref="echarts"></div>
        </el-card>
        <div class="graph">
          <!-- 柱状图 -->
          <el-card class="graph1">
            <div style="height: 240px;" ref="userEcharts"></div>
          </el-card>
          <!-- 饼状图 -->
          <el-card class="graph2">
              <div style="height: 240px;" ref="videoEcharts"></div>
          </el-card>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import axios from 'axios'
  import {
    getData
  } from '../api/data.js' // 解构出getData
  import * as echarts from 'echarts'; //无版本的引入方法

  export default {
    name: 'Center',
    data() {
      return {
        userImg: require("@/views/img/milk.jpg"),
        tableData: [{
            name: 'grape',
            todayBuy: 100,
            monthBuy: 200,
            totalBuy: 1000
          },
          {
            name: 'banana',
            todayBuy: 101,
            monthBuy: 300,
            totalBuy: 1200
          },
          {
            name: 'apple',
            todayBuy: 102,
            monthBuy: 400,
            totalBuy: 1400
          },
          {
            name: 'milk',
            todayBuy: 103,
            monthBuy: 500,
            totalBuy: 1500
          },
          {
            name: 'cake',
            todayBuy: 104,
            monthBuy: 600,
            totalBuy: 1600
          },
          {
            name: 'orange',
            todayBuy: 105,
            monthBuy: 700,
            totalBuy: 1700
          }
        ],
        tableLabel: {
          name: '商品',
          todayBuy: '今日购买',
          monthBuy: '本月购买',
          totalBuy: '总购买'
        },
        countData: [{
            name: '今日支付订单',
            value: '2313',
            icon: "success",
            color: "#2ec7c9"
          },
          {
            name: '今日收藏订单',
            value: '8013',
            icon: "success",
            color: "#2ec7c9"
          },
          {
            name: '今日未支付订单',
            value: '4503',
            icon: "success",
            color: "#2ec7c9"
          },
          {
            name: '本月支付订单',
            value: '8799',
            icon: "success",
            color: "#67C23A"
          },
          {
            name: '本月收藏订单',
            value: '6575',
            icon: "success",
            color: "#67C23A"
          },
          {
            name: '本月未支付订单',
            value: '4564',
            icon: "success",
            color: "#67C23A"
          },
        ]
      }
    },
    mounted() { // 生命周期
      getData().then(res => { //调用完之后，可以拿到响应
        const {
          code,
          data
        } = res.data //对code、data进行解构
        if (code === 20000) {
          this.tableData = data.tableData
          const order = data.orderData
          const xData = order.date
          const keyArray = Object.keys(order.data[0])
          const series = []
          //遍历数据
          keyArray.forEach(key => {
            series.push({
              name: key,
              data: order.data.map(item => item[key]),
              type: 'line' //图标类型：折线图
            })
          })
          //图标的配置项和数据
          const option = {
            //x轴的坐标
            xAxis: {
              data: xData
            },
            //y轴的坐标
            yAxis: {},
            //图例
            legend: {
              data: keyArray
            },
            //数据
            series
          }
          //传入一个当前的dom节点       实例化
          const E = echarts.init(this.$refs.echarts);
          E.setOption(option);

          // 用户图
          const userOption = {
            title: {
                text: '用户数量统计',
                left: 'center'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
            },
            yAxis: {
              type: 'value',
              data:data.userData.map(item => item.data )
            },
            //配置提示信息
            tooltip: {},
            //图例
            legend: {
                left: 'right'
            },
            series: [
              {
                 name:'新增用户',
                 data:data.userData.map(item => item.new ),
                 type:'bar'   //柱状图
              },
              {
                 name:'活跃用户',
                 data:data.userData.map(item => item.active ),
                 type:'bar'
              },
            ]
          }
          const U = echarts.init(this.$refs.userEcharts);
          U.setOption(userOption);

          //饼图
          const videoOption = {
             tooltip:{
                trigger:"item"  //触发类型
             },
             series:[
               {
                 data:data.videoData,
                 type:'pie'
               }
             ],
          }
          const V = echarts.init(this.$refs.videoEcharts);
          V.setOption(videoOption);

        }
        console.log(res);
      })
    }

  };
</script>

<style>
  /* 左侧部分 */
  .milkCss {
    width: 10%;
    height: 10%;
    border-radius: 50%;
  }

  .userInfo {
    position: absolute;
    left: 106px;
    top: 16px;
  }

  .hrCss {
    color: gainsboro;
    margin-top: 20px;
  }
  .name{
    text-decoration: none;
    color: #000000;
  }

  /*  右侧部分 */
  /* 订单统计部分 */
  .num {
    display: flex;
    width: 1200px;
    height: 100px;
  }

  .icon {
    width: 50%;
    height: 100px;
    float: left;

  }

  .detail {
    margin-right: 30px;
  }

  .num_val {
    padding-left: 20px;
    text-align: center;
  }

  .txt {
    padding-left: 20px;
    width: 120px;
    text-align: center;
  }

  /* 图表部分 */
  .picture {
    position: relative;
    margin-left: -390px;
    margin-top: -120px;
  }

  .pic {
    width: 1130px;
    height: 280px;
    position: absolute;
    left: 390px;
    top: 150px;
  }

  .graph {
    display: flex;
  }

  .graph1 {
    width: 550px;
    height: 240px;
    position: absolute;
    left: 390px;
    top: 460px;
  }

  .graph2 {
    width: 550px;
    height: 240px;
    position: absolute;
    left: 974px;
    top: 460px;
  }

  #main {
    width: 200px;
    height: 100px;
  }
</style>
